<template>
  <page-loading :show="pageLoading">
    <!-- 创建到店单,到店记录 -->
    <view class="create-store-record">
      <!-- 表单主要内容 -->
      <view class="form-main">
        <!-- 车辆信息 -->
        <view class="car-info">
          <!-- 小标题部分 -->
          <view class="top-title flex flex-jc-sb">
            <view class="title font-30"
              ><text class="requiredIcon">*</text>车辆信息</view
            >
            <label
              v-if="carInfo.carName"
              class="right-btn"
              @click="selectAddType()"
            >
              <i-icon icon="iconqiehuan" color="#666" size="26rpx"></i-icon>
              <text>切换车辆</text>
            </label>

            <label v-else class="right-btn" @click="selectAddType()">
              <i-icon icon="icontianjia_1" color="#666"></i-icon>
              <text>添加车辆</text>
            </label>
          </view>

          <!-- 车辆 -->
          <view class="car flex flex-jc-c flex-ai-c">
            <!-- 有车辆 -->
            <template v-if="carInfo.carName">
              <view class="">
                <view class="content flex">
                  <view class="row">
                    <image
                      src="../../static/img/im/face/face_14.jpg"
                      mode="widthFix"
                      class="img"
                    ></image>
                  </view>
                  <view class="row">
                    <view>{{ carInfo.carName }}</view>
                  </view>
                </view>
                <!-- <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon> -->
              </view>
            </template>

            <!-- 暂无车辆 -->
            <view v-else class="not-car">暂无车辆</view>
          </view>

          <!-- 弹窗 - 添加车辆 -->
          <u-popup v-model="addCarShow" mode="bottom" border-radius="20">
            <view class="popup-addcar">
              <view class="title">请选择添加车辆方式</view>
              <view class="content">
                <view class="item" @click="goSelectCarPage()">
                  <text>手动添加</text>
                </view>
                <view class="item" @click="goScan('vin')">
                  <i-icon
                    icon="iconshouye-saoma"
                    size="34rpx"
                    color="#666666"
                  ></i-icon>
                  <text class="ml-20">拍车架号添加</text>
                </view>
              </view>
            </view>
          </u-popup>
        </view>

        <!-- 车辆其他信息，车牌，VIN等 -->
        <view class="car-other-info">
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="requiredIcon">*</view>
            <view class="left">车牌</view>
            <view class="right flex flex-ai-c flex-1">
              <view class="car-number color-333" @click="showKeyBoard('car')"
                ><text>{{ abbrName }}</text>
                <i-icon
                  icon="iconpaixu"
                  type="single"
                  size="20rpx"
                  color="#999"
                ></i-icon>
              </view>
              <!-- <input
              v-model="carNum"
              type="text"
              maxlength="7"
              placeholder="请输入车牌号"
              placeholder-style="color: #999;"
              @blur="changeCarNum"
            /> -->
              <view
                class="flex-1"
                :class="carNum ? 'color-333' : 'color-999'"
                @click="showKeyBoard('carNum')"
                >{{ carNum ? carNum : '请输入' }}</view
              >
              <i-icon
                icon="iconshouye-saoma"
                size="44rpx"
                @click.native="goScan('carNumber')"
              ></i-icon>
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="requiredIcon">*</view>
            <view class="left">车辆里程数</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <!-- <input
              v-model="carInfo.milage"
              type="number"
              maxlength="8"
              placeholder="请输入里程数"
              placeholder-style="color: #999;"
            /> -->
              <view
                :class="carInfo.milage ? 'color-333' : 'color-999'"
                @click="showKeyBoard('number')"
                >{{ carInfo.milage ? carInfo.milage : '请输入里程数' }}</view
              >
              <text class="color-333 font-30">km</text>
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="requiredIcon">*</view>
            <view class="left">车辆VIN</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <!-- <input
              v-model="carInfo.vin"
              type="text"
              maxlength="17"
              placeholder="请输入"
              placeholder-style="color: #999;"
              class="flex-1"
              @blur="vincheck"
            /> -->
              <view
                :class="carInfo.vin ? 'color-333' : 'color-999'"
                @click="showKeyBoard('vin')"
                >{{ carInfo.vin ? carInfo.vin : '请输入' }}</view
              >
              <i-icon
                icon="iconshouye-saoma"
                size="44rpx"
                @click.native="goScan('vin')"
              ></i-icon>
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <!-- <view class="requiredIcon">*</view> -->
            <view class="left">发动机号</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <!-- <input
              v-model="carInfo.engine"
              type="text"
              placeholder="请输入"
              maxlength="25"
              placeholder-style="color: #999;"
            /> -->
              <view
                :class="carInfo.engine ? 'color-333' : 'color-999'"
                @click="showKeyBoard('engine')"
                >{{ carInfo.engine ? carInfo.engine : '请输入' }}</view
              >
            </view>
          </view>
        </view>

        <!-- 客户信息 -->
        <view class="car-other-info">
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="left">客户姓名</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <input
                v-model="userName"
                type="text"
                maxlength="20"
                placeholder="请填写"
                placeholder-style="color: #999;"
              />
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="left">性别</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <!-- <u-radio-group
              v-model="gender"
              @change="radioGroupChange"
              active-color="#ffe23e"
            >
              <u-radio @change="radioChange" name="0" class="gender">
                先生
              </u-radio>
              <u-radio @change="radioChange" name="1"> 女士 </u-radio>
            </u-radio-group> -->
              <view
                class="gender color-999 flex flex-ai-c"
                @click="selGender(0)"
              >
                <i-icon
                  v-show="gender !== 0"
                  icon="icontuoyuan"
                  type="single"
                  size="40rpx"
                  color="#999"
                ></i-icon>
                <i-icon
                  v-show="gender === 0"
                  icon="icongouxuan"
                  type="multiple"
                  size="40rpx"
                ></i-icon>
                <text class="gender-text color-333">先生</text>
              </view>
              <view class="color-999 flex flex-ai-c" @click="selGender(1)">
                <i-icon
                  v-show="gender !== 1"
                  icon="icontuoyuan"
                  type="single"
                  size="40rpx"
                  color="#999"
                ></i-icon>
                <i-icon
                  v-show="gender === 1"
                  icon="icongouxuan"
                  type="multiple"
                  size="40rpx"
                ></i-icon>
                <text class="gender-text color-333">女士</text>
              </view>
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <view class="requiredIcon">*</view>
            <view class="left">联系电话</view>
            <view class="right flex flex-ai-c flex-1 flex-jc-fe">
              <!-- <input
              v-model="userMobile"
              type="number"
              maxlength="11"
              placeholder="请填写"
              placeholder-style="color: #999;"
            /> -->
              <view
                :class="userMobile ? 'color-333' : 'color-999'"
                @click="showKeyBoard('tel')"
                >{{ userMobile ? userMobile : '请填写' }}</view
              >
            </view>
          </view>
        </view>

        <!-- 服务类型 -->
        <view class="serve-type">
          <!-- 小标题部分 -->
          <view class="top-title">
            <view class="flex flex-ai-c">
              <view class="requiredIcon">*</view>
              <view class="title font-30"
                >服务类型 <text class="color-999">（可多选）</text></view
              >
            </view>
            <view class="sub-title color-999">服务类型请询问客户</view>
          </view>

          <!-- 多选部分 -->
          <view class="checkbox-content">
            <u-checkbox-group
              width="33.3%"
              size="40"
              active-color="#ffe23e"
              @change="serveTypeChange"
            >
              <u-checkbox
                v-model="item.isCheck"
                shape="circle"
                v-for="(item, index) in serveTypes"
                :key="index"
                :name="item.id"
                >{{ item.name }}</u-checkbox
              >
            </u-checkbox-group>
          </view>
        </view>

        <!-- 排队类型 -->
        <view class="queue-type">
          <!-- 小标题部分 -->
          <view class="top-title">
            <view class="flex flex-ai-c">
              <view class="requiredIcon">*</view>
              <view class="title font-30"
                >排队类型 <text class="color-999">（可多选）</text></view
              >
            </view>
            <view class="sub-title color-999">排队类型请询问客户</view>
          </view>

          <!-- 多选部分 -->
          <view class="checkbox-content">
            <u-checkbox-group
              width="46%"
              size="40"
              active-color="#ffe23e"
              @change="queueTypeChange"
            >
              <u-checkbox
                v-model="item.isCheck"
                shape="circle"
                v-for="(item, index) in queueTypes"
                :key="index"
                :name="item.id"
                >{{ item.name }}</u-checkbox
              >
            </u-checkbox-group>
          </view>
        </view>
      </view>

      <!-- 按钮创建 -->
      <view class="btn-create">
        <button class="btn" @click="confirm()">确定创建</button>
      </view>
      <!-- 自定义键盘 -->
      <u-keyboard
        v-model="keyboardShow"
        :show-tips="false"
        :mode="mode"
        :cancelBtn="cancelBtn"
        :confirm-btn="confirmBtn"
        :dot-enabled="false"
        :abc="showABC"
        :changeABC="false"
        :mask="false"
        :mask-close-able="false"
        @change="keyboardChange"
        @backspace="backspace"
        @cancel="keyboardConfirm"
        @confirm="keyboardConfirm"
      ></u-keyboard>
    </view>
  </page-loading>
</template>

<script src="./createToStoreRecord.js"></script>

<style lang="scss" scoped>
@import './createToStoreRecord.scss';
</style>
